import React from 'react';
import ApiShowBase from './../ApiShowBase';
import ApiShowTable from './../ApiShowTable';
import ApiDefaultTempletStore from './../../../stores/apiStore/ApiDefaultTempletStore';
import { observer } from 'mobx-react';
import { WeaAlertPage, WeaInputLocale, WeaLocaleProvider } from 'ecCom';
import { Spin, Pagination } from 'antd';
import Templet1 from './Templet1';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;// 过滤多语言字符串
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言

@observer
export default class DefaultTemplet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      store: new ApiDefaultTempletStore(),
    };
  }
  componentWillMount() {
    const { store } = this.state;
    // console.log(this.props)
    const { init } = store;
    init(this.props);
  }

  render() {
    const { params, showSpin, total, isList, baseList, tableList, loading, isSuccess, msgcode, subTableList, apiId, apiName, updata_date, showAlertIcon, totalNumber, onChangePage, thisPage, itemRender } = this.state.store;
    if (!loading) {
      if (isSuccess) {
        if (isList == '0' || typeof (isList) === 'undefined') {
          return (
            <div style={{ height: '100%', overflow: 'scroll', padding: '10px' }}>
              <div id={apiId} className="section-big-title">  <strong>{apiName}</strong> </div>
              <div className="group_show_single_time">{isSuccess && `(更新时间：${updata_date})`} </div>
              {baseList && baseList.length > 0 && <ApiShowBase ecId={`${this && this.props && this.props.ecId || ''}_ApiShowBase@mhkguf`} baseList={baseList} />}
              {tableList && <ApiShowTable ecId={`${this && this.props && this.props.ecId || ''}_ApiShowTable@vnsr0k`} tableList={tableList} subList={subTableList} />}
            </div>
          );
        }
        return (
          <div style={{ height: '100%', overflow: 'scroll', padding: '10px' }}>
            <div id={apiId} className="section-big-title">  <strong>{apiName}</strong> </div>
            <div className="group_show_single_time">{isSuccess && `(更新时间：${updata_date})`} </div>
            {tableList && <ApiShowTable ecId={`${this && this.props && this.props.ecId || ''}_ApiShowTable@67pc5s`} tableList={tableList} subList={subTableList} />}
            {
              total > 1 && <div style={{ float: 'right', margin: '15px 20px' }}>
                <Pagination
                  ecId={`${this && this.props && this.props.ecId || ''}_Pagination@9v2y88`}
                  defaultCurrent={1}
                  total={totalNumber}
                  pageSize={20}
                  showTotal={total => `共 ${total} 条`}
                  onChange={onChangePage}
                  current={thisPage}
                />
              </div>
            }
          </div>
        );
      }
      return (
        <div className="api_container_alertpage">
          <div id={apiId} className="section-big-title">  <strong>{apiName}</strong> </div>
          {showAlertIcon ? <div><WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@vu0hww`}>{msgcode}</WeaAlertPage></div> : msgcode}
        </div>
      );
    }
    return (
      showSpin
        ?
          <div className="crm-api-span"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@czmgdv`} spinning={loading} size="large" tip={getLabel(384470, '正在读取数据...')} /> </div>
        :
        <div style={{ padding: '10px' }}>
            <div id={apiId} className="section-big-title"><strong>{apiName}</strong> </div>
            <div >{getLabel(384470, '正在读取数据...')}</div>
          </div>
    );
  }
}
